<template>
  <div>
    <router-view></router-view>
    <tabbar style="position:fixed" v-model="tab">
      <tabbar-item link="/">
        <img slot="icon" src="assets/home_dark.png">
        <img slot="icon-active" src="assets/home_light.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item badge='3' link="/cart">
        <img slot="icon" src="assets/cart_dark.png">
        <img slot="icon-active" src="assets/cart_light.png">
        <span slot="label">购物车</span>
      </tabbar-item>
      <tabbar-item link="/mycenter">
        <img slot="icon" src="assets/user_dark.png">
        <img slot="icon-active" src="assets/user_light.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tab: 0,
      title: '首页',
      titleArr: [
        { path: '/', name: 'homepage', title: '首页' },
        { path: '/cart', name: 'Cart', title: '购物车' },
        { path: '/mycenter', name: 'Mycenter', title: '个人中心' },
      ],
      username: sessionStorage.getItem('username')
    }
  },
  methods: {
    changeTab() {
      let title = '';
      let tab;
      const path = this.$route.path;
      switch (path) {
        case '/':
          tab = 0;
          break;
        case '/cart':
          tab = 1;
          break;
        case '/mycenter':
          tab = 2;
          break;
      }
      this.tab = tab;
    }
  },
  computed: {

  },
  //渲染之前 用于tab切换
  beforeMount() {
    this.changeTab();
  },
  //状态更新之前 用于tab切换
  beforeUpdate() {
    this.changeTab();
  }
}
</script>

<style>
.vux-demo {
  text-align: center;
}
.logo {
  width: 100px;
  height: 100px;
}
</style>
